<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="albumQuery.id" placeholder="专辑id"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="albumQuery.name"
              placeholder="专辑名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="albumQuery.online" placeholder="是否上线">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="已上线" :value="1"></el-option>
              <el-option label="未上线" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="albumQuery.startTime"
              type="datetime"
              placeholder="更新起始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="albumQuery.endTime"
              type="datetime"
              placeholder="更新结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="24:00:00"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
            <el-button type="default" @click="restData()">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 查询条件结束 -->

    <!-- 表格开始 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="resList"
        element-loading-text="数据加载中"
        stripe
        style="width: 100%"
        type="expand"
      >
        <el-table-column prop="date" label="序号" width="80px">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="albumName" label="专辑名称" align="center"> </el-table-column>
        <el-table-column prop="wallpaperTags" label="标签" width="140">
          <template slot-scope="scope">
            <p>
              <el-tag
                v-for="item in scope.row.wallpaperTags"
                :key="item.tag"
                type="success"
              >
                {{ item.tag }}
              </el-tag>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" align="center"> </el-table-column>
        <el-table-column prop="gmtModified" label="修改时间" align="center"> </el-table-column>
        <el-table-column prop="online" label="状态" width="80px" align="center">
          <template slot-scope="scope">
            {{ scope.row.online === 1 ? "已上线" : "未上线" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <p>
              <router-link :to="'/album/edit/' + scope.row.id">
                <el-link type="primary" size="mini" icon="el-icon-edit"
                  >修改</el-link
                >
              </router-link>
              <!-- 切换上下线状态 -->
              <el-link
                :type="scope.row.online === 1 ? 'warning' : 'info'"
                size="mini"
                icon="el-icon-connection"
                style="margin-left: 10px"
                @click="
                  modifiyAlbumOnline(
                    scope.row.id,
                    scope.row.online === 1 ? 0 : 1
                  )
                "
              >
                {{ scope.row.online === 1 ? "下线" : "上线" }}
              </el-link>

             
            </p>
            <p>
               <!-- 添加图片 -->
              <router-link :to="'/album/add/' + scope.row.id">
                <el-link
                  type="primary"
                  size="mini"
                  icon="el-icon-upload"
                  style="margin-left: 10px"
                  >上传图片</el-link
                >
              </router-link>

              <el-link
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeDataById(scope.row.id, scope.row.albumName)"
                style="margin-left: 10px"
                >删除</el-link
              >
              
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total,prev, pager, next,jumper"
      @current-change="getList"
      style="padding: 30px 0; text-align: center"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import album from "@/api/album";
export default {
  data() {
    return {
      loading: true,
      resList: null,
      page: 1,
      limit: 10,
      total: 0,
      albumQuery: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //专辑列表
    getList(page = 1) {
      this.page = page;
      album
        .getAlbumListPage(this.page, this.limit, this.albumQuery)
        .then((res) => {
          console.log(res);
          this.resList = res.data.result;
          this.total = res.data.total;
          this.loading = false;
          console.log("专辑列表", this.resList);
          //console.log(this.total);
        });
    },
    //清空
    restData() {
      this.albumQuery = {};
      this.getList();
    },

    //删除专辑
    removeDataById(id, albumName) {
      this.$confirm(`确定删专辑:${albumName}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          album.deleteAlbumById(id).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    //修改专辑上下线状态
    modifiyAlbumOnline(id, state) {
      album.modifiyOnline(id, state).then((res) => {
        console.log(res);
        this.getList();
      });
    },
  },
};
</script>
<style>
</style>